// 我的页面 组件库

import './index.less';
import {Image, Text, View} from "@tarojs/components";
import {GLOBAL_IMAGE} from "../../constant/contant";
import Taro from "@tarojs/taro";
import {utils} from "../../utils/utils";
import {Api, token} from "../../api/api";
import {wxActions} from "../../utils/wxActions";

export function Logo(props) {
    const {imgUrl} = props;

    return(
        <View className={"logo"}>
            <Image src={imgUrl}/>
        </View>
    )
}

export function Avatar(props) {
    const {imgUrl, dispatch, openLoginMask} = props

    const chooseAvatar = () => {
        // 未登录
        if (!token()) {
            openLoginMask();
            return;
        }
        Taro.chooseImage({
            success: function (res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let tempFilePath = res.tempFilePaths[0];
                Api.uploadAvatar({
                    avatarfile: tempFilePath
                }).then(res => {
                   wxActions.refreshUserInfo(dispatch)
                }).catch((err) => {
                    wxActions.showTip(err.message);
                });
            }
        })
    }

    return (
        <View className={"avatar"} onClick={chooseAvatar}>
            <View className={"avatar_bg"}>
                <View className={"avatar_img"}>
                    <Image src={imgUrl}/>
                </View>
            </View>
            <View className={"camera"}>
                <Image src={GLOBAL_IMAGE.camera}/>
            </View>
        </View>
    )
}

export function Name(props) {
    const {name, openLoginMask} = props;

    const handleClick = () => {
        // 未登录
        if (!token()) {
            openLoginMask();
        }
    }

    return (
        <View className={"name"}>
            <View className={"name_text"} onClick={handleClick}>
                <Text>{utils.isEmpty(name) ? "未登录" : name}</Text>
            </View>
            {/*<View className={"name_ico"}>*/}
            {/*    <Image src={GLOBAL_IMAGE.pen}/>*/}
            {/*</View>*/}
        </View>
    )
}

export function Menu(props) {
    const {openLoginMask} = props;

    const MENU1 = {
        "imgUrl": GLOBAL_IMAGE.user_menu1,
        "url": "/pages/userInfo/index"
    }
    const MENU2 = {
        "imgUrl": GLOBAL_IMAGE.user_menu2,
        "url": "/pages/myCollect/index"
    }
    const MENU3 = {
        "imgUrl": GLOBAL_IMAGE.user_menu3,
        "url": "/pages/myLike/index"
    }
    const MENU4 = {
        "imgUrl": GLOBAL_IMAGE.user_menu4,
        "url": "/pages/myComment/index"
    }

    const handleClick = (obj) => () => {
        // 未登录
        if (!token()) {
            openLoginMask();
            return;
        }
        if (obj.url) {
            Taro.navigateTo({
                url: obj.url
            })
        }
    }

    const menuItem = (obj) =>
        <View className={"menuItem"} onClick={handleClick(obj)}>
            <Image src={obj.imgUrl}/>
        </View>

    return (
        <View className={"menu"}>
            {menuItem(MENU1)}
            {menuItem(MENU2)}
            {menuItem(MENU3)}
            {menuItem(MENU4)}
        </View>
    )
}
